<!-- 后台首页 -->
<template>
    <el-container style="height: 750px; border: 1px solid #eee">
        <div id="logo">
            后台管理系统
        </div>
        <el-aside width="200px" style="margin-top:77px">
            <!-- 把动态加载菜单提取成vue组件 -->
            <el-menu :default-openeds="[1]" background-color="rgb(57,61,73)" text-color="white" :unique-opened="true"
                router>
                <template v-for="item in menuData">
                    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.mid" :key="item.mid">
                        <template #title>
                            <el-icon><component :is="item.icon"></component></el-icon>
                            {{ item.mname}}
                        </template>
                        <el-menu-item v-for="child in item.children" :index="child.route" :key="child.mid">
                            <el-icon><component :is="child.icon"></component></el-icon>
                            {{ child.mname}}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :index="item.mid" :key="item.mid" :route="item.route">
                        <el-icon><component :is="item.icon"></component></el-icon>
                        {{item.mname}}</el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px;height: 77px">
                <div class="toolbar">
                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 33px">
                            <setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                                <el-dropdown-item>Add</el-dropdown-item>
                                <el-dropdown-item>Delete</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>{{store.username}}</span>
                    <el-avatar :size="40" :src="store.imgPath" id="userImage"></el-avatar>
                </div>
            </el-header>
            <el-main>
                <router-view />
                
            </el-main>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
    import axios from 'axios';
    import { reactive,ref,onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import { menuApi } from '@/api/menu-api';
    const router = useRouter();
    //引入useCounterStore实例
    import { useUserStore } from '../stores/userstore';
    //创建stote实例
    let store = useUserStore();
    

    //1.创建存储menu的数据对象
    interface Menu {
        mid:number,
        mname:string,
        children:Menu[]
        route:string,
        icon:string
    }
    //创建响应式数据
    let menuData = ref<Menu[]>([]) 

     onMounted(async () => {
        console.log(store.imgPath);
        console.log(store.username)
        
        console.log("MOUNTED");
        //发送请求拿到菜单数据
        console.log(store.username);
        let res = await menuApi.getMenusByUname(store.username);
        console.log(res);
        if (res.data.success) {
            menuData.value = res.data.data
        }
        console.log(menuData);
        
     })
    
</script>

<style>
    .el-header {
        background-color: rgb(26, 160, 148);
        color: #333;
        line-height: 77px;
    }

    .el-aside {
        color: #333;
        background-color: rgb(57, 61, 73);
    }

    .transition-box {
        margin-bottom: 10px;
        width: 800px;
        height: 500px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
        position: relative;
        top: 20px;

    }

    #logo {
        background-color: red;
        width: 200px;
        height: 77px;
        position: absolute;
        background-color: rgb(36, 51, 70);
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 77px;
        letter-spacing: 6px;

    }

    #userImage {
        margin-left: 5px;
        vertical-align: middle;
    }
</style>